<template>
	<view>
		<div class="title-name">
			<slot name="title">歌曲</slot>
		</div>
		<ul class="music-list-wrap">
			<li :class="{'music-list-item':true,'active':currentPlayInfo.id === item.id}" v-for="(item,index) in musicArrayData"
			 :key="index" @click="toPlayMusci(item)">
				<p class="song-name">{{item.name}}</p>
				<div class="song-des">
					<span v-if="item.song?item.song.exclusive:false" class="icon iconfont sq">&#xe75f;</span>
					<span>{{item.song.artists[0].name | splitString}}</span>
					<span>-</span>
					<span>{{item.song.album.name | splitString}}</span>
				</div>
				<span v-if="currentPlayInfo.id !== item.id" class="icon iconfont playBtn">&#xe636;</span>
				<span v-else class="icon iconfont pauseBtn">&#xe74b;</span>
			</li>
		</ul>
		<min-player></min-player>
	</view>
</template>

<script>
	import minPlayer from "./min-player.vue"
	export default {
		data() {
			return {

			};
		},
		filters: {
			splitString(val) {
				if (val.length > 22) {
					return val.substring(0, 22) + "...";
				} else {
					return val;
				}
			}
		},
		components: {
			minPlayer
		},
		computed: {
			currentPlayInfo() {
				return this.$store.state.player.currentPlayInfo
			},
		},
		props: {
			musicArrayData: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			async toPlayMusci(item) {
				console.log(item.id)
				const isOk = await this.rq.fetchGet(this.apiUrl.checkSong, {
					id: item.id
				})
				if (isOk[1].statusCode === 404) {
					uni.showToast({
						title: "对不起暂无版权",
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: `/pages/player/player?id=${item.id}`,
					})
				}
			}
		},
		created() {

		}

	}
</script>

<style lang="scss">
	.title-name {
		font-size: .8rem;
		margin: 8px 0px;
		padding-left: 6px;
		border-left: 2px solid #ff3620;
	}

	.music-list-wrap {

		padding-bottom: 2.5rem;

		.music-list-item {
			min-height: 2rem;
			margin: 4px;
			position: relative;
			border-bottom: 1px solid lighten(gray, 40%);

			&.active {
				color: #FF0000;
			}

			.song-name {
				font-size: .7rem;
				max-width: 80%;
				overflow: hidden;
			}

			.song-des {
				font-size: .5rem;
				color: gray;
				display: flex;
				align-items: center;
				vertical-align: middle;

				.sq {
					font-size: 1.3rem;
					color: red;
				}
			}

			.playBtn,
			.pauseBtn {
				position: absolute;
				right: 5px;
				font-size: 1.1rem;
				top: .8rem;
				color: red;
			}

		}

	}
</style>
